<template>
  <div>
    <div id="components-form-demo-advanced-search" style="margin: 20px 10px">
      <a-row :gutter="24" style="margin-bottom: 15px">
        <a-col :span="6">
          处理批次号：<a-input
          :maxLength="128"
            v-model="searchData.batchNo"
            style="width: 60%"
          />
        </a-col>
        <a-col :span="6">
          客户编号：<a-select
            show-search
            option-filter-prop="children"
            style="width: 60%"
            :filter-option="filterOption"
            v-model="searchData.tenantId"
          >
            <a-select-option
              :value="item.tenantId"
              v-for="item in accArray"
              :key="item.id"
              :titles="item.title"
            >
              {{ item.companyName + "/" + item.tenantId }}
            </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          有无客户编号：
          <a-select
            default-value="lucy"
            style="width: 60%"
            v-model="searchData.isNo"
          >
            <a-select-option value="1"> 有 </a-select-option>
            <a-select-option value="2"> 无 </a-select-option>
            <a-select-option value="3"> 全部 </a-select-option>
          </a-select>
        </a-col>
        <a-col :span="6">
          <div>
            <a-button
              type="primary"
              class="searchBtn"
              @click="
                () => {
                  getTabList();
                }
              "
            >
              查询
            </a-button>
            <a-button
              style="margin: 0 10px"
              type="primary"
              class="searchBtn"
              @click="resetSearch"
            >
              重置
            </a-button>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-spin tip="Loading..." :spinning="spinning">
      <a-table
        :columns="columns"
        :data-source="tabData"
        :pagination="false"
        :scroll="{ x: 1200 }"
      >
        <span slot="days" slot-scope="text, record"> {{ record.days }}天 </span>
        <span slot="waybillCount" slot-scope="text, record">
          {{ record.waybillCount === null ? "暂无" : record.waybillCount }}
        </span>
        <span slot="putCount" slot-scope="text, record">
          {{ record.putCount === null ? "暂无" : record.putCount }}
        </span>
        <span slot="destructionCount" slot-scope="text, record">
          {{
            record.destructionCount === null ? "暂无" : record.destructionCount
          }}
        </span>
        <span slot="batchState" slot-scope="text, record">
          <span style="color: #3eae7c">
            {{ record.batchState === null ? "暂无" : record.batchState }}
          </span>
        </span>
        <span slot="backCount" slot-scope="text, record">
          {{ record.backCount === null ? "暂无" : record.backCount }}
        </span>
        <span slot="createTime" slot-scope="text, record">
          {{
            record.createTime === null
              ? "暂无"
              : record.createTime.replace("T", "  ")
          }}
        </span>
        <span slot="remark" slot-scope="text, record">
          {{ record.remark === null ? "暂无" : record.remark }}
        </span>
        <span slot="action" class="action" slot-scope="text, record">
          <a
            slot="action"
            style="color: #2929e0; border-bottom: 1px solid #2929e0"
            href="javascript:;"
            @click="onSubmitDataInfo(record)"
            >发送账单</a
          >
          <a-divider type="vertical" />
          <a
            slot="action"
            style="color: #2929e0; border-bottom: 1px solid #2929e0"
            href="javascript:;"
            @click="clientVisibleShow(record)"
            >查看账单</a
          >
          <a-divider type="vertical" />
          <a
            slot="action"
            style="color: #2929e0; border-bottom: 1px solid #2929e0"
            href="javascript:;"
            @click="rowInfo(record)"
            >详细数据</a
          >
        </span>
      </a-table>
    </a-spin>
    <!-- 分页器 -->
    <div style="margin: 20px 0; text-align: center">
      <a-config-provider>
        <a-pagination
          show-size-changer
          :pageSizeOptions="['10', '20', '30']"
          :show-total="
            (total) => `${$t('m.page.Total')} ${total} ${$t('m.page.items')}`
          "
          @showSizeChange="showChange"
          :buildOptionText="
            (props) => ` ${props.value} ${$t('m.page.a')}/${$t('m.page.page')}`
          "
          show-quick-jumper
          :default-current="searchData.current"
          :total="total"
          @change="onChangePage"
        />
      </a-config-provider>
    </div>

    <!-- //详细数据表格 -->
    <a-modal v-model="tabInfoVisible" title="详细数据" width="80%">
      <template slot="footer" class="modelBtn">
        <a-button
          @click="tabInfoVisible = false"
          style="background: #d7d7d7; color: #fff; border: none"
          >取消</a-button
        >
      </template>
      <a-table
        :data-source="tableListModal"
        :pagination="false"
        :scroll="{ x: 1300 }"
      >
        <!-- 物流商 -->
        <a-table-column
          key="logisticsName"
          data-index="logisticsName"
          align="center"
          width="10%"
        >
          <span slot="title"> 物流商</span>
          <template slot-scope="text, record">
            {{ record.logisticsName }}
          </template>
        </a-table-column>
        <!-- 运单号 -->
        <a-table-column
          key="waybillNm"
          data-index="waybillNm"
          align="center"
          width="18%"
        >
          <span slot="title">运单号</span>
          <template slot-scope="text, record">
            <span>
              {{ record.waybillNm }}
            </span>
          </template>
        </a-table-column>
        <!-- 商品名称 -->
        <a-table-column
          key="skuName"
          data-index="skuName"
          align="center"
          width="10%"
        >
          <span slot="title">商品名称</span>
          <template slot-scope="text, record">
            {{ record.skuName }}
          </template>
        </a-table-column>
        <!-- 退件SKU -->
        <a-table-column key="sku" data-index="sku" align="center" width="10%">
          <span slot="title">退件SKU</span>
          <template slot-scope="text, record">
            <span>
              {{ record.sku }}
            </span>
          </template>
        </a-table-column>
        <!-- 退件数量 -->
        <a-table-column
          key="productNumber"
          data-index="productNumber"
          align="center"
          width="10%"
        >
          <span slot="title">退件数量</span>
          <template slot-scope="text, record">
            <span>
              {{ record.productNumber }}
            </span>
          </template>
        </a-table-column>
        <!-- 箱数 -->
        <a-table-column
          key="packingNumber"
          data-index="packingNumber"
          align="center"
          width="8%"
        >
          <span slot="title"> 箱数</span>
          <template slot-scope="text, record">
            <!-- <a-input-number
              size="small"
              v-model="record.packingNumber"
              :min="1"
            /> -->
            {{ record.packingNumber }}
          </template>
        </a-table-column>
        <!-- 长宽高 -->
        <a-table-column
          key="lengthNumber"
          data-index="lengthNumber"
          align="center"
          width="20%"
        >
          <span slot="title">长*宽*高(cm)</span>
          <template slot-scope="text, record" class="box-sizes">
            <!-- <a-input-number
              size="small"
              style="width: 25%"
              v-model="record.lengthNumber"
              :min="1"
            />*
            <a-input-number
              size="small"
              style="width: 25%"
              v-model="record.wideNumber"
              :min="1"
            />*
            <a-input-number
              size="small"
              style="width: 25%"
              v-model="record.highNumber"
              :min="1"
            /> -->
            {{ record.lengthNumber }}*{{ record.wideNumber }}*{{
              record.highNumber
            }}
          </template>
        </a-table-column>
        <!-- 重量 -->
        <a-table-column
          key="caratNumber"
          data-index="caratNumber"
          align="center"
          width="10%"
        >
          <span slot="title"> 重量(Kg)</span>
          <template slot-scope="text, record" class="box-sizes">
            <!-- <a-input-number
              size="small"
              v-model="record.caratNumber"
              :min="1"
            /> -->
            {{ record.caratNumber }}
          </template>
        </a-table-column>
        <!-- //处理方式 -->
        <a-table-column
          key="typeName"
          data-index="typeName"
          align="center"
          width="10%"
        >
          <span slot="title"> 处理方式</span>
          <template slot-scope="text, record" class="box-sizes">
            {{ record.typeName === null ? "暂无" : record.typeName }}
          </template>
        </a-table-column>
        <!-- 库位选择 -->
        <a-table-column
          v-if="tabRowState === '36'"
          key="type"
          data-index="type"
          align="center"
          width="12%"
        >
          <span slot="title"> 库位选择</span>
          <template slot-scope="text, record" class="box-sizes">
            <span v-if="record.isLocation === '1'">
              {{ record.locationName }}
            </span>
            <a-cascader
              v-if="record.isLocation === '0'"
              :style="
                record.locationId === null || record.locationId === ''
                  ? 'border: 1px solid #f00;border-radius:5px'
                  : 'border: 1px solid #ccc;border-radius:5px'
              "
              size="small"
              placeholder=""
              :options="storageLocation"
              change-on-select
              @change="
                (value, selectedOptions) =>
                  onChangeLocation(value, selectedOptions, record)
              "
            />
          </template>
        </a-table-column>

        <!-- //操作 -->
        <a-table-column
          key="operation"
          data-index="operation"
          title="操作"
          width="200px"
          align="center"
        >
          <template slot-scope="text, record">
            <a
              v-if="tabRowState === '36' && record.isLocation === '0'"
              href="javascript:;"
              style="color: #2929e0; border-bottom: 1px solid #2929e0"
              @click="savaCheckRowData(record)"
              >保存</a
            >
            <a-divider
              v-if="tabRowState === '36' && record.isLocation === '0'"
              type="vertical"
            />
            <a
              href="javascript:;"
              style="color: #2929e0; border-bottom: 1px solid #2929e0"
              @click="lookImg(record)"
              >查看图片</a
            >
          </template>
        </a-table-column>
      </a-table>
    </a-modal>

    <!-- //查看图片 -->
    <a-modal v-model="lookImgVisible" title="查看图片" width="50%">
      <template slot="footer">
        <a-button
          style="background: #d7d7d7; color: #fff; border: none"
          @click="lookImgVisible = false"
          >取消</a-button
        >
      </template>
      <span v-if="imgUrlArray.length >= 1">
        <img
          @click="lookImgs(item)"
          :src="item"
          :style="
            imgUrlArray.length <= 0
              ? ''
              : 'width: 200px; height: 200px; margin: 15px; cursor: pointer'
          "
          v-for="(item, i) in imgUrlArray"
          :key="i"
        />
      </span>
      <span v-else> 还未上传图片！ </span>
    </a-modal>
    <!-- //图片放大 -->
    <a-modal
      :visible="previewVisible"
      :footer="null"
      @cancel="previewVisible = false"
    >
      <img alt="example" style="width: 100%" :src="previewImage" />
    </a-modal>

    <!-- 服务项信息查看 -->
    <ServiceModalReap />
  </div>
</template>

<script>
import { mapState } from "vuex";
import ServiceModalReap from "@/components/serviceModal/ServiceModalReap.vue";
import {
  by_retreat_pageBatchMageAudit,
  by_retreat_forecastInfoGet,
  by_retreat_batchCsdUpdate,
  by_retreat_csdUpdate,
} from "@/apis/clientSide/ReturnsList/ReturnsList";
import moment from "moment";
export default {
  components: {
    ServiceModalReap,
  },
  created() {
    this.getTabList();
  },
  data() {
    return {
      spinning: false,
      //库位数据
      storageLocation: [],

      lookImgVisible: false,
      previewImage: "",
      previewVisible: false,
      imgUrlArray: [],
      //模态框表格数据
      tableListModal: [],
      tabInfoVisible: false,
      moment,
      total: 1,
      loading: false,
      visible: false,
      tabData: [],
      searchData: {
        size: 10,
        current: 1,
        batchNo: null,
        tenantId: null,
        isNo: "",
      },
      //详细数据每一行
      //   modalTableRowData: {},
      //   oldBatchNo: null,
      tabRowState: "",
      tabRowDataId: null,
    };
  },
  methods: {
    //打开服务项模态框
    clientVisibleShow(record) {
      setTimeout(() => {
        if (record.state === "136") {
          this.$bus.$emit("reappearance", record, 7, record.id, true);
        }
      }, 50);
    },
    //提交至审核中心
    onSubmitDataInfo(record) {
      let _this = this;
      this.$confirm({
        title: `确定要发送批次号为${record.batchNo}的账单吗?`,
        okText: "确定",
        cancelText: "取消",
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(async () => {
              let { code } = await by_retreat_csdUpdate(record.id);
              if (code === "10000") {
                _this.loading = false;
                _this.serveVisible = false;
                _this.getTabList();
                resolve();
              } else {
                reject();
              }
            }, 1000);
          }).catch(() => console.log("Oops errors!"));
        },
        onCancel() {},
      });
    },
    //模态框确认按钮
    modalSearch() {
      this.$refs.searchBathFrom.validate(async (valid) => {
        if (valid) {
          let { code } = await by_retreat_batchCsdUpdate(
            this.oldBatchNo,
            this.searchBath.batchNo,
            this.modalTableRowData
          );
          if (code === "10000") {
            let { code, responseBody } = await by_retreat_forecastInfoGet(
              this.oldBatchNo
            );
            if (code === "200") {
              this.tableListModal = responseBody;
              this.clientVisible = false;
              this.getTabList();
            }
          }
        } else {
          this.$message.error("请输入必填项！");
        }
      });
    },
    //图片放大
    lookImgs(url) {
      this.previewImage = url;
      this.previewVisible = true;
    },
    //每一行数据详情表格
    async rowInfo(record) {
      // console.log(record);
      this.tabRowDataId = record.id;
      this.tabRowState = record.state;
      this.oldBatchNo = record.batchNo;
      let { code, responseBody } = await by_retreat_forecastInfoGet(
        record.batchNo
      );
      if (code === "200") {
        // responseBody.forEach(item=>{
        //   item.editFlag=false;
        // })
        this.tableListModal = responseBody;
        this.tabInfoVisible = true;
        // this.getStorageLocation(record.warehousingId);
      }
    },
    //查看图片
    lookImg(record) {
      this.imgUrlArray =
        record.file === "" || record.file === null
          ? []
          : record.file.split(",");
      this.lookImgVisible = true;
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    //重置按钮
    resetSearch() {
      let size = this.searchData.size;
      let current = this.searchData.current;
      this.searchData = {
        size: size,
        current: current,
        batchNo: null,
        tenantId: null,
        isNo: "",
      };
      this.getTabList();
    },
    //分页器事件
    onChangePage(pageNumber) {
      this.searchData.current = pageNumber;
      this.getTabList();
    },
    //页码变更
    showChange(size, current) {
      this.searchData.current = size;
      this.searchData.size = current;
      this.getTabList();
    },
    async getTabList() {
      this.spinning = true;
      let { code, responseBody } = await by_retreat_pageBatchMageAudit(
        this.searchData
      );
      if (code === "200") {
        this.total = responseBody.total * 1;
        this.tabData = responseBody.records;
        this.spinning = false;
      }
    },
  },
  computed: {
    ...mapState(["accArray"]),
    columns() {
      return [
        {
          title: "客户编号",
          dataIndex: "tenantId",
          align: "center",
          width: "8%",
        },
        {
          title: "批次号",
          dataIndex: "batchNo",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "10%",
        },
        {
          title: "批次名称",
          dataIndex: "batchName",
          align: "center",
          // scopedSlots: { customRender: "selfClassifyName" },
          width: "10%",
        },
        {
          title: "仓库",
          dataIndex: "warehousingName",
          align: "center",
          width: "8%",
        },
        {
          title: "运单总数",
          dataIndex: "waybillCount",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "waybillCount" },
        },
        {
          title: "入库数量",
          dataIndex: "putCount",
          scopedSlots: { customRender: "putCount" },
          align: "center",
          width: "8%",
        },
        {
          title: "销毁数量",
          dataIndex: "destructionCount",
          scopedSlots: { customRender: "destructionCount" },
          align: "center",
          width: "8%",
        },
        {
          title: "退回数量",
          dataIndex: "backCount",
          scopedSlots: { customRender: "backCount" },
          align: "center",
          width: "8%",
        },
        {
          title: "状态",
          dataIndex: "batchState",
          scopedSlots: { customRender: "batchState" },
          align: "center",
          width: "13%",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          scopedSlots: { customRender: "createTime" },
          align: "center",
          width: "10%",
        },
        {
          title: "自动销毁时间",
          dataIndex: "endTime",
          scopedSlots: { customRender: "endTime" },
          align: "center",
          width: "10%",
        },
        {
          title: "倒计时",
          dataIndex: "days",
          scopedSlots: { customRender: "days" },
          align: "center",
          width: "10%",
        },
        {
          title: "操作",
          dataIndex: "action",
          scopedSlots: { customRender: "action" },
          align: "center",
          width: 240,
          fixed: "right",
        },
      ];
    },
  },
};
</script>

<style lang="less" scoped>
.searchBtn {
  background: #fff;
  color: #3eae7c;
  text-shadow: none;
}
.searchBtn:hover {
  background: #3eae7c;
  color: #fff;
}
/deep/.ant-modal-footer {
  text-align: center !important;
  button {
    margin: 0 50px;
  }
}
</style>